<template class="main">
    <div class="pages">
        <van-form @submit="onSubmit">

            <div class="container" v-for="item in uiState">
                <div class="item">
                    <div class="nav">
                        <img :src="icons.titleIcon" class="icon">
                        <img :src="icons.lineIcon" class="line" v-if="item.title !== '审批'">
                    </div>
                    <div class="content">
                        <div class="title" v-text="item.title"></div>
                        <!--基本信息-->
                        <van-cell-group class="base-info" v-if="item.title === '基本信息'" inset>
                            <div>
                                <span class="symbol">*</span>
                                <span class="sub-title">任务名称</span>
                            </div>

                            <van-field :border="false" v-model="form.taskName" placeholder="请输入任务名称" class="name" />
                            <div class="divider"></div>
                            <div>
                                <span class="symbol">*</span>
                                <span class="sub-title">上报类型</span>
                            </div>
                            <van-field class="type" :border="false">
                                <template #input>
                                    <van-radio-group direction="horizontal" v-model="form.type">
                                        <van-radio :name="DICT_BREAK_LAW">
                                            <template #icon="props">
                                                <img class="img-icon"
                                                    :src="props.checked ? icons.checkedIcon : icons.unCheckIcon" />
                                            </template>
                                            违法违规
                                        </van-radio>
                                        <van-radio :name="DICT_WORK_COMMUNICATE">
                                            <template #icon="props">
                                                <img class="img-icon"
                                                    :src="props.checked ? icons.checkedIcon : icons.unCheckIcon" />
                                            </template>
                                            工作交流
                                        </van-radio>
                                        <van-radio :name="DICT_COMPLIANCE_REPORT">
                                            <template #icon="props">
                                                <img class="img-icon"
                                                    :src="props.checked ? icons.checkedIcon : icons.unCheckIcon" />
                                            </template>
                                            合规报告
                                        </van-radio>
                                        <van-radio :name="DICT_SUGGEST">
                                            <template #icon="props">
                                                <img class="img-icon"
                                                    :src="props.checked ? icons.checkedIcon : icons.unCheckIcon" />
                                            </template>
                                            意见建议
                                        </van-radio>
                                        <van-radio :name="DICT_ACCORDANCE_OTHER">
                                            <template #icon="props">
                                                <img class="img-icon"
                                                    :src="props.checked ? icons.checkedIcon : icons.unCheckIcon" />
                                            </template>
                                            其它
                                        </van-radio>
                                    </van-radio-group>
                                </template>
                            </van-field>
                            <div class="divider"></div>
                            <span class="sub-title">上报描述</span>
                            <van-field v-model="form.desc" rows="2" autosize type="textarea" maxlength="500"
                                show-word-limit name="content" placeholder="请输入反馈内容" class="desc" />
                            <div class="divider"></div>
                            <span class="sub-title">关联任务</span>
                            <van-field is-link readonly placeholder="请选择" @click="picker.associate.show = true"
                                v-model="picker.associate.text" class="associate" :border="false">
                                <template #input>
                                    <div class="target">
                                        <span class="text">{{ picker.associate.text }}</span>
                                        <img class="icon-add" :src="icons.addIcon">
                                    </div>
                                </template>
                            </van-field>
                            <van-popup v-model:show="picker.associate.show" position="bottom">
                                <van-picker
                                    :columns="picker.associate.columns"
                                    @cancel="picker.associate.show = false"
                                    @confirm="onAssociateConfirm"
                                    value-key="taskName" />
                            </van-popup>
                            <div class="divider"></div>
                            <div>
                                <span class="symbol">*</span>
                                <span class="sub-title">接收部门</span>
                            </div>
                            <van-field is-link readonly @click="picker.platform.show = true"
                                v-model="picker.platform.text" class="associate" :border="false">
                                <template #input>
                                    <div class="target">
                                        <span class="text">{{ picker.platform.text }}</span>
                                        <img class="icon-add" :src="icons.addIcon">
                                    </div>
                                </template>
                            </van-field>
                            <van-popup v-model:show="picker.platform.show" position="bottom">
                                <van-picker
                                    :columns="picker.platform.columns"
                                    @cancel="picker.platform.show = false"
                                    @confirm="onPlatformConfirm"
                                    value-key="orgName" />
                            </van-popup>

                            <div class="divider"></div>
                            <div>
                                <span class="symbol">*</span>
                                <span class="sub-title">接收人</span>
                            </div>
                            <van-field is-link readonly @click="handleAcceptUser"
                                v-model="picker.user.text" class="associate" :border="false">
                                <template #input>
                                    <div class="target">
                                        <span class="text">{{ picker.user.text }}</span>
                                        <img class="icon-add" :src="icons.addIcon">
                                    </div>
                                </template>
                            </van-field>
                            <van-popup v-model:show="picker.user.show" position="bottom">
                                <van-picker
                                    :columns="picker.user.columns"
                                    @cancel="picker.user.show = false"
                                    @confirm="onUserConfirm"
                                    value-key="userNickName" />
                            </van-popup>


                            <div class="divider"></div>
                            <span class="sub-title">附件上传</span>

                            <van-uploader v-model="form.file" :max-count="1" class="upload">
                                <div class="upload-files">
                                    <img class="icon-upload" :src="icons.uploadIcon">
                                    <span class="text-upload">点击上传</span>
                                </div>

                            </van-uploader>
                        </van-cell-group>
                        <!--审批-->
                        <van-cell-group class="approval" v-else-if="item.title === '审批'">
                            <div>
                                <span class="symbol">*</span>
                                <span class="sub-title">审批人</span>
                            </div>
                            <van-field is-link readonly @click="picker.approval.show = true"
                                v-model="picker.approval.text" class="associate" :border="false">
                                <template #input>
                                    <div class="target">
                                        <span class="text">{{ picker.approval.text }}</span>
                                        <img class="icon-add" :src="icons.nextIcon">
                                    </div>
                                </template>
                            </van-field>
                            <van-popup v-model:show="picker.approval.show" position="bottom">
                                <van-picker
                                    :columns="picker.approval.columns"
                                    @cancel="picker.approval.show = false"
                                    @confirm="onApprovalConfirm"
                                    value-key="appUserName" />
                            </van-popup>

                            <div class="divider"></div>
                            <span class="sub-title">抄送人</span>

                            <van-field is-link readonly @click="picker.send.show = true"
                                v-model="picker.send.text" class="associate" :border="false">
                                <template #input>
                                    <div class="target">
                                        <span class="text">{{ picker.send.text }}</span>
                                        <img class="icon-add" :src="icons.nextIcon">
                                    </div>
                                </template>
                            </van-field>
                            <van-popup v-model:show="picker.send.show" position="bottom">
                                <van-picker
                                    :columns="picker.send.columns"
                                    @cancel="picker.send.show = false"
                                    @confirm="onSendConfirm"
                                    value-key="appUserName" />
                            </van-popup>

                        </van-cell-group>
                    </div>

                </div>
            </div>
        </van-form>
    </div>
    <div class="tab-bottom">
        <div class="confirm" @click="onSubmit">发 送</div>
        <div class="reset" @click="reset">重 置</div>
    </div>

</template>
<script lang="ts" setup>
import { onMounted, reactive } from 'vue';
import unCheckIcon from '@/assets/imgs/workbench/wb_uncheck.png';
import checkIcon from '@/assets/imgs/workbench/wb_checked.png';
import lineIcon from '@/assets/imgs/workbench/wb_bi_line.png';
import titleIcon from '@/assets/imgs/workbench/wb_ot_title.png';
import addIcon from '@/assets/imgs/workbench/wb_add.png';
import uploadIcon from '@/assets/imgs/workbench/wb_upload.png';
import nextIcon from '@/assets/imgs/workbench/wb_next.png';
import { getAcceptAndUser, getApprovalUser, getRelationTask, report } from '@/api/report';
import { getTargetUser } from '@/api/ordertask';
import Toast from 'vant/lib/toast';
import { DICT_BREAK_LAW, DICT_WORK_COMMUNICATE, DICT_COMPLIANCE_REPORT, DICT_SUGGEST, DICT_ACCORDANCE_OTHER, DICT_REPORT } from '@/api/types/dict'
import { useRouter } from 'vue-router'
import { uploadFile } from '@/api/file';

const router = useRouter()

const icons = reactive({
    titleIcon: titleIcon,
    lineIcon: lineIcon,
    addIcon: addIcon,
    uploadIcon: uploadIcon,
    nextIcon: nextIcon,
    checkedIcon: checkIcon,
    unCheckIcon: unCheckIcon,
})

const uiState = reactive([
    {
        title: '基本信息'
    }, {
        title: '审批'
    }
])

const picker = reactive({
    associate: {
        show: false,
        text: '请选择',
        columns: [] as any
    },
    platform: {
        show: false,
        text: '请选择',
        columns: [] as any
    },
    user: {
        show: false,
        text: '请选择',
        columns: [] as any
    },
    approval: {
        show: false,
        text: '请选择',
        columns: [] as any
    },
    send: {
        show: false,
        text: '请选择',
        columns: [] as any
    }
})

const form = reactive({
    taskName: '',
    type: '',
    desc: '',
    associate: '',
    department: '',
    user: '',
    approval: '',
    send: '',
    file: []
})

const reset = () => {
    picker.approval.text = "请选择";
    picker.platform.text = "请选择";
    picker.user.text = "请选择";
    picker.approval.text = "请选择";
    picker.send.text = "请选择";
    form.taskName = '';
    form.type = '';
    form.desc = '';
    form.associate = '';
    form.department = '';
    form.user = '';
    form.approval = '';
    form.send = '';
    form.file = [];
}

const onAssociateConfirm = (item: any) => {
    picker.associate.text = item.taskName
    picker.associate.show = false
    form.associate = item.taskId
}

const onPlatformConfirm = (item: any) => {
    picker.platform.text = item.orgName
    form.department = item.orgId
    picker.user.columns = item.users
    picker.platform.show = false
}

const handleAcceptUser = () => {
    if(!form.department){
        Toast({
            message: '请先选择接收部门',
            position: 'bottom',
        });
        return
    }
    picker.user.show = true
}

const onUserConfirm = (item: any) => {
    picker.user.text = item.userNickName
    picker.user.show = false
    form.user = item.userId
}

const onApprovalConfirm = (item: any) => {
    picker.approval.text = item.appUserName;
    form.approval = item.appUserId;
    picker.approval.show = false;
}

const onSendConfirm = (item: any) => {
    picker.send.text = item.appUserName;
    form.send = item.appUserId;
    picker.send.show = false;
}

const onSubmit = async () => {
    if (!formCheck()) return

    const submitResult = await report({
        reportTitle: form.taskName,
        reportType: form.type,
        reportContent: form.desc,
        taskId: form.associate,
        receiveDeptId: form.department,
        receiveUserId: form.user,
        fileId: '',
        approvalPlatformUser: form.approval,
        ccByPlatformUser:  [form.send] 
    })
    if (submitResult.code === 0) {
        Toast({
            message: '提交成功',
            position: 'bottom',
        });
        router.back();
    }
    if(form.file){
        uploadFile(form.file)
    }
}

//获取关联任务
const getRelation = async () => {
    const relationTask = await getRelationTask()
    picker.associate.columns = relationTask.data
}

const getAccept = async () => {
    const accept = await getAcceptAndUser()
    picker.platform.columns = accept.data
}

//获取审批人
const getApproval = async () => {
    const approvalUserData = await getApprovalUser({
        code: DICT_REPORT
    })
    picker.approval.columns = approvalUserData.data
}

//获取抄送人
const getCCUser = async () => {
    const ccData = await getTargetUser()
    picker.send.columns = ccData.data
}

const formCheck = () => {
    if (!form.taskName) {
        Toast({
            message: '请输入上报名称',
            position: 'bottom',
        });
        return false
    }
    if (!form.type) {
        Toast({
            message: '请选择上报类型',
            position: 'bottom',
        });
        return false
    }
    if (!form.department) {
        Toast({
            message: '请选择接收部门',
            position: 'bottom',
        });
        return false
    }
    if (!form.user) {
        Toast({
            message: '请选择接收人',
            position: 'bottom',
        });
        return false
    }
    if (!form.approval) {
        Toast({
            message: '请选择审批人',
            position: 'bottom',
        });
        return false
    }
    return true
}

onMounted(() => {
    getRelation()
    getAccept()
    getApproval()
    getCCUser()

})

</script>
<style lang="scss" scoped>
.main {
    position: relative;
    min-height: 100%;
}

.tab-bottom {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 50px;
    background: #ffffff;
    box-shadow: 0px -1px 2.5px 1px rgba(0, 0, 0, 0.03), -0.5px 0px 0px 0.5px #ebebeb inset;
    line-height: 100px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 6px;
    box-sizing: border-box;

    .confirm {
        width: 169.5px;
        height: 30px;
        background: #f1f4ff;
        border-radius: 5px;
        flex: 1;
        text-align: center;
        margin: 0 6px;
        line-height: 30px;

        font-size: 14px;
        font-family: PingFang SC, PingFang SC-Medium;
        font-weight: bold;
        color: #4c69dc;
    }

    .reset {
        width: 169.5px;
        height: 30px;
        background: #f7f7f7;
        border-radius: 5px;
        flex: 1;
        text-align: center;
        margin: 0 6px;
        line-height: 30px;
        font-size: 14px;
        font-family: PingFang SC, PingFang SC-Medium;
        font-weight: bold;
        color: #4c69dc;
    }
}

.pages {
    padding: 12px 12px 62px 12px;

    .container {
        display: flex;
        flex-direction: column;

        .item {
            display: flex;
            flex-direction: row;
            height: 100%;

            .nav {
                width: 12px;
                margin-top: 3px;
                display: flex;
                flex-direction: column;

                .icon {
                    width: 12px;
                    height: 12px;
                }

                .line {
                    width: 0.5px;
                    height: 100%;
                    margin-left: 6px;
                }
            }

            .content {
                width: 100%;
                display: flex;
                flex-direction: column;
                margin-left: 8px;

                .title {
                    width: auto;
                    height: 17.5px;
                    font-size: 18px;
                    font-family: PingFang SC, PingFang SC-Bold;
                    font-weight: 700;
                    text-align: left;
                    color: #181818;
                }



                .base-info {
                    width: 100%;
                    background: #ffffff;
                    border-radius: 5px;
                    box-shadow: 0.5px 0.87px 4.5px 1px rgba(0, 0, 0, 0.05);
                    display: flex;
                    flex-wrap: wrap;
                    flex-direction: column;
                    margin: 16px 0;
                    padding: 16px 12px;
                    box-sizing: border-box;

                    .name {
                        background-color: #FFFFFF;
                        border: 0.5px solid #F7F7F7;
                        border-radius: 5px;
                        font-size: 10px;
                        margin-top: 8px;
                        padding: 0 0 0 14px;
                        background: url('../../../assets/imgs/workbench/wb_bi_input.png');
                    }

                    .type {
                        margin-top: 4px;
                        display: flex;
                        flex-wrap: wrap;
                        padding: 0px;
                        background-color: #FFFFFF;

                        &:deep(.van-radio__icon) {
                            flex: none;
                            display: flex;
                            font-size: 10px;
                            align-items: center;
                            justify-content: center;

                            .img-icon {
                                width: 8px;
                                height: 8px;
                            }
                        }

                        &:deep(.van-radio__label) {
                            font-size: 10px;
                            font-family: PingFang SC, PingFang SC-Medium;
                            font-weight: bold;
                            text-align: left;
                            color: #646464;
                            line-height: 25px;
                            margin-left: 4px;
                        }


                    }

                    .desc {
                        background-color: #FFFFFF;
                        border: 0.5px solid #F7F7F7;
                        border-radius: 5px;
                        font-size: 10px;
                        margin-top: 8px;
                        padding: 0 0 0 14px;
                        background: url('../../../assets/imgs/workbench/wb_bi_input.png');

                        &:deep(.van-field__word-limit) {
                            font-size: 7px;
                            font-family: PingFang SC, PingFang SC-Medium;
                            font-weight: 500;
                            color: #a9a9a9;
                            margin-right: 2px;
                            text-align: right;
                        }

                        &:after {
                            content: none;
                        }
                    }
                }


                .approval {
                    width: 100%;
                    background: #ffffff;
                    border-radius: 5px;
                    box-shadow: 0.5px 0.87px 4.5px 1px rgba(0, 0, 0, 0.05);
                    display: flex;
                    flex-wrap: wrap;
                    flex-direction: column;
                    margin: 16px 0;
                    padding: 16px 12px;
                    box-sizing: border-box;
                }

            }
        }


    }

    .sub-title {
        font-size: 10px;
        font-family: PingFang SC, PingFang SC-Medium;
        font-weight: bold;
        text-align: left;
        color: #181818;
        margin-left: 4px;
    }

    .symbol {
        font-size: 10px;
        font-family: PingFang SC, PingFang SC-Medium;
        font-weight: bold;
        text-align: left;
        color: #eb0000;
    }

    .divider {
        width: 100%;
        height: 1px;
        margin: 12px 0;
        background: url('../../../assets/imgs/workbench/wb_bi_line.png');
    }

    .target {
        width: 100%;
        height: 24px;
        padding: 0 14px;
        border-radius: 2.5px;
        background: url('../../../assets/imgs/workbench/wb_bi_input.png');
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        align-items: center;

        .text {
            font-size: 10px;
            font-family: PingFang SC, PingFang SC-Medium;
            font-weight: 500;
            text-align: left;
            color: #a9a9a9;
        }

        .icon-add {
            width: 8px;
            height: 8px;
            margin-left: auto;
        }

        .icon-next {
            width: 5.5px;
            height: 8.5px;
            margin-left: auto;
        }
    }

    .associate {
        width: 100%;
        border: 0.5px solid #F7F7F7;
        border-radius: 5px;
        font-size: 10px;
        margin-top: 8px;
        padding: 0;
        display: flex;

        &:deep(.van-cell__right-icon) {
            display: none;
        }
    }

    .upload {
        margin-top: 8px;

        .upload-files {
            width: 82px;
            height: 20px;
            border-radius: 2.5px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: row;
            background: url('../../../assets/imgs/workbench/wb_bg_text.png');



            .icon-upload {
                width: 6px;
                height: 7px;
                margin-right: 4px;
            }

            .text-upload {
                font-size: 10px;
                font-family: PingFang SC, PingFang SC-Medium;
                font-weight: 500;
                color: #4c69dc;
            }
        }
    }



}
</style>